<template>
  <div id="app">
    <router-view></router-view>
    <el-dialog title="标题" :visible.sync="imageModel">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "app",
  // 依赖注入
  provide() {
    return {
      app: this
    }
  },
  components: {},
  data() {
    return {
      imageModel: false,
      callback: false
    };
  },
  created() {
    // 初始化用户信息
    this.$store.commit("initUser");
    // 初始化后台菜单
    this.$store.commit("initNavBar");
  },
  methods: {
    // 确定
    confirm() {
      // 选中的图片url
      if (typeof this.callback === 'function') {
        console.log("选中的图片url");
      }
      // 隐藏
      this.hide();
    },
    // 打开弹框
    show(callback) {
      this.callback = callback;
      this.imageModel = true;
    },
    // 关闭弹框
    hide() {
      this.imageModel = false;
      this.callback = false;
    }
  }
};
</script>

<style>
/* 修改浏览器滚动条的样式 */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease;
}
</style>
